<template>
  <div class="alipay-simulator">
    <!-- 手机模拟器外壳 -->
    <div class="phone-frame">
      <!-- 顶部听筒 -->
      <div class="phone-speaker"></div>
      
      <!-- 小程序内容区域 -->
      <div class="mini-program-container">
        <!-- 顶部导航栏 -->
        <header class="alipay-nav">
          <div class="nav-left">
            <i class="back-icon">←</i>
          </div>
          <div class="nav-title">我的小程序</div>
          <div class="nav-right">
            <i class="more-icon">⋯</i>
          </div>
        </header>
        
        <!-- 页面内容区 -->
        <main class="page-content">
          <!-- 头部信息卡片 -->
          <div class="info-card">
            <div class="card-header">
              <img src="https://picsum.photos/id/64/60/60" alt="用户头像" class="avatar">
              <div class="user-info">
                <h3 class="username">支付宝用户</h3>
                <p class="user-tag">蚂蚁会员 · 黄金会员</p>
              </div>
              <button class="edit-btn">编辑</button>
            </div>
            
            <!-- 功能入口 -->
            <div class="function-entries">
              <div class="entry-item" v-for="(item, index) in functionEntries" :key="index">
                <div class="entry-icon" :style="{ backgroundColor: item.color }">
                  {{ item.icon }}
                </div>
                <div class="entry-name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          
          <!-- 服务列表 -->
          <div class="service-section">
            <h2 class="section-title">我的服务</h2>
            <div class="service-grid">
              <div class="service-item" v-for="(service, index) in services" :key="index">
                <div class="service-icon">{{ service.icon }}</div>
                <div class="service-name">{{ service.name }}</div>
              </div>
            </div>
          </div>
          
          <!-- 动态信息 -->
          <div class="dynamic-section">
            <h2 class="section-title">最新动态</h2>
            <div class="dynamic-item">
              <div class="dynamic-icon">📢</div>
              <div class="dynamic-content">
                <p class="dynamic-title">蚂蚁森林能量即将成熟</p>
                <p class="dynamic-desc">您有128g能量将在30分钟后成熟，记得来收取哦~</p>
              </div>
              <div class="dynamic-time">刚刚</div>
            </div>
          </div>
        </main>
        
        <!-- 底部Tab栏 -->
        <footer class="tab-bar">
          
        </footer>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 功能入口数据
const functionEntries = [
  { icon: '💰', name: '余额', color: '#E6F7FF' },
  { icon: '💳', name: '银行卡', color: '#FFF2E8' },
  { icon: '🎁', name: '红包', color: '#FFF0F0' },
  { icon: '📊', name: '账单', color: '#F6FFED' }
];

// 服务列表数据
const services = [
  { icon: '🚇', name: '交通出行' },
  { icon: '🏠', name: '生活缴费' },
  { icon: '🍜', name: '外卖美食' },
  { icon: '🎦', name: '电影演出' },
  { icon: '🚗', name: '共享单车' },
  { icon: '🏥', name: '医疗健康' },
  { icon: '📚', name: '教育公益' },
  { icon: '➕', name: '更多' }
];

// 底部Tab栏数据
const tabBarItems = [
  { icon: '首页', text: '首页' },
  { icon: '发现', text: '发现' },
  { icon: '消息', text: '消息' },
  { icon: '我的', text: '我的' }
];
</script>

<style scoped>
/* 手机模拟器样式 */
.alipay-simulator {
  display: flex;
  justify-content: center;
  padding: 2rem;
  background-color: #f0f2f5;
}

.phone-frame {
  width: 375px; /* 支付宝设计标准宽度 */
  height: 667px;
  background-color: #111;
  border-radius: 40px;
  padding: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

.phone-speaker {
  width: 60px;
  height: 6px;
  background-color: #333;
  border-radius: 3px;
  margin: 0 auto 15px;
}

/* 小程序容器 */
.mini-program-container {
  width: 100%;
  height: calc(100% - 15px);
  background-color: #f5f5f5;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.alipay-nav {
  height: 48px;
  background-color: #1677FF; /* 支付宝主色调 */
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  font-size: 17px;
  position: relative;
  z-index: 10;
}

.nav-title {
  font-weight: 500;
}

.back-icon, .more-icon {
  font-size: 20px;
}

/* 页面内容区 */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 50px; /* 预留Tab栏高度 */
}

/* 信息卡片 */
.info-card {
  background-color: #fff;
  border-radius: 12px;
  margin: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 4px 0;
}

.user-tag {
  font-size: 12px;
  color: #8C8C8C;
  margin: 0;
}

.edit-btn {
  background-color: #F5F7FA;
  color: #1677FF;
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
}

/* 功能入口 */
.function-entries {
  display: flex;
  justify-content: space-between;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.entry-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin-bottom: 8px;
}

.entry-name {
  font-size: 12px;
  color: #333;
}

/* 服务区域 */
.service-section {
  background-color: #fff;
  border-radius: 12px;
  margin: 0 16px 16px 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 16px 0;
  color: #333;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-icon {
  width: 40px;
  height: 40px;
  background-color: #F5F7FA;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  margin-bottom: 8px;
}

.service-name {
  font-size: 12px;
  color: #333;
}

/* 动态区域 */
.dynamic-section {
  background-color: #fff;
  border-radius: 12px;
  margin: 0 16px 16px 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dynamic-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid #F5F5F5;
}

.dynamic-icon {
  width: 36px;
  height: 36px;
  background-color: #FFF7E8;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin-right: 12px;
  flex-shrink: 0;
}

.dynamic-content {
  flex: 1;
}

.dynamic-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px 0;
  color: #333;
}

.dynamic-desc {
  font-size: 12px;
  color: #8C8C8C;
  margin: 0;
}

.dynamic-time {
  font-size: 12px;
  color: #B3B3B3;
  flex-shrink: 0;
}

/* 底部Tab栏 */
.tab-bar {
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #EEEEEE;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: #8C8C8C;
  width: 25%;
}

.tab-item.active {
  color: #1677FF; /* 激活状态使用主色调 */
}

.tab-icon {
  font-size: 20px;
  margin-bottom: 2px;
}
</style>
